<script setup lang="ts">
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue";
import AutoForm from "@/components/auto-form/AutoForm.vue";
import {onMounted, reactive, ref} from "vue";
import {AutoFormItem} from "@/interface/auto-form.ts";
import {MovieReqVO} from "@/interface/movie.ts";
import {Page} from "@/interface/base.ts";
import {
  useAdminUpdateUserInfoApi,
  useMovieAddApi,
  useMovieEditApi,
  usePageUniAppUserApi
} from "@/services/api";
import type {PageUniAppUserReqVO, PageUniAppUserRespVO} from "@/interface/user.ts";
import {AdminUpdateUniAppReqVO} from "@/interface/user.ts";

const dialogVisible = ref(false)
const title = ref("")
const model = ref<Record<string, AutoFormItem>>({
  id: {
    key: "id",
    name: "id",
    value: "",
    itemType: 'none'
  },
  nickName: {
    key: "nickName",
    name: "昵称",
    value: "",
    itemType: "input",
    placeholder: "请输入昵称",
    rules: {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  },
  phoneNumber: {
    key: "phoneNumber",
    name: "手机号",
    value: "",
    itemType: "input",
    placeholder: "请输入手机号",
    rules: {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    }
  },
  wallet: {
    key: "wallet",
    name: "钱包",
    value: "",
    itemType: "input-float",
    placeholder: "请输入片名",
    rules: {
      required: true,
      message: '请输入片名',
      trigger: 'blur'
    }
  },
  status: {
    key: "status",
    name: "是否禁用",
    value: "",
    itemType: "radio",
    options: [
      {
        label: "是",
        value: 1
      },
      {
        label: "否",
        value: 0
      }
    ],
    rules: {
      required: true,
      message: '请选择是否禁用',
      trigger: 'blur'
    }
  },
  avatar: {
    key: "avatar",
    name: "头像",
    value: "",
    itemType: "image",
    rules: {
      required: true,
      message: 'avatar',
      trigger: 'blur'
    }
  },
})
const pageUniAppUserReq: PageUniAppUserReqVO = reactive({
  size: 10,
  current: 1
})
const uniAppUserTableData = ref<Page<PageUniAppUserRespVO>>({
  list: [],
  total: 0
})
/**
 * 数据请求方法
 */
const loadData = async () => {
  const {data: res} = await usePageUniAppUserApi(pageUniAppUserReq)
  uniAppUserTableData.value = res
}

/**
 * 处理影片编辑操作操作
 */
const handleEdit = (row: MovieReqVO) => {
  title.value = "编辑"
  Object.keys(model.value).forEach(key => {
    model.value[key].value = row[key]
  })
  dialogVisible.value = true
}
const handleSearch = () => {
  loadData()
}
const handleSizeChange = () => {
  pageUniAppUserReq.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageUniAppUserReq.current = val
  loadData()
}
const onSubmit = async (data: PageUniAppUserRespVO) => {
  if (data.id) {
    const vo:AdminUpdateUniAppReqVO = {
      id:data.id,
      nickName:data.nickName,
      phoneNumber:data.phoneNumber,
      avatar:data.avatar,
      status:data.status,
      wallet:data.wallet.toString()
    }
    await useAdminUpdateUserInfoApi(vo)
    await loadData()
  }
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
const handleUpload = (url: string) => {
  model.value.images.value = url
}
onMounted(async () => {
  await loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageUniAppUserReq" class="demo-form-inline">
        <el-form-item label="片名">
          <el-input v-model="pageUniAppUserReq.nickName" placeholder="请输入片名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="uniAppUserTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"/>
        <el-table-column prop="openid" label="openid" width="180"/>
        <el-table-column prop="sessionKey" label="sessionKey" width="180"/>
        <el-table-column prop="nickName" label="昵称" width="60"/>
        <el-table-column prop="phoneNumber" label="手机号" width="90"/>
        <el-table-column prop="avatar" label="头像" width="90">
          <template #default="scope">
            <el-avatar
                :src="scope.row.avatar"
            />
          </template>
        </el-table-column>
        <el-table-column prop="wallet" label="钱包" width="90"/>
        <el-table-column prop="createTime" label="创建时间" width="180"/>
        <el-table-column prop="status" label="是否禁用" width="90">
          <template #default="scope">
            <el-tag
                :type="scope.row.status == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.status == 1 ? "是" : "否" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageUniAppUserReq.current"
          v-model:page-size="pageUniAppUserReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="uniAppUserTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit" @onCancel="onCancel"
               @handle-upload="handleUpload"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}
</style>